<div>
    <span>span</span>
    <span>span</span>
    <span>span</span>
  </div>
  
  <button class="add">添加节点</button>
  <button class="del">删除节点</button>
  
  <script>
    const div = document.querySelector('div')
  
    // 父节点
    // console.log(div.parentNode)
  
    // 子节点
    // console.log(div.children)
  
    const add = document.querySelector('.add')
    const del = document.querySelector('.del')
  
    // 添加节点- 创建p标签
    let pBox = document.createElement('p')
  
  
    // 创建完毕的节点，还没有添加到页面上，需要掉用append
    add.addEventListener('click', function () {
        //设置内容 
        pBox.innerHTML = '新节点'
        

      // 结尾添加节点
      // div.append(pBox)
      div.prepend(pBox)
    })
  
    del.addEventListener('click', function () {
      // 删除节点
      div.remove()
    })
  
  </script>